<template>
  <div>
    <footer>
      <div class="footer_in banxin tanxing">
        <div class="left">
          <ul class="tanxing">
            <li>服务条款</li>
            <li>隐私政策</li>
            <li>儿童隐私政策</li>
            <li>版权投诉</li>
            <li>投资者关系</li>
            <li>广告合作</li>
            <li>廉正举报</li>
            <li>联系我们</li>
          </ul>
          <p>
            网易公司版权所有©1997-2022&nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：<span
              >浙网文[2021] 1186-054号</span
            >
          </p>
          <p>
            <span
              >粤B2-20090191-18 &nbsp;&nbsp;&nbsp;工业和信息化部备案管理系统网站 </span
            ><span>&nbsp;&nbsp;&nbsp; 浙公网安备 33010902002564号</span>
          </p>
          <p>
            互联网宗教信息服务许可证：浙（2022）0000120
            &nbsp;&nbsp;&nbsp;&nbsp;监督举报邮箱：51jubao@service.netease.com
          </p>
        </div>
        <div class="right">
          <ul class="tanxing list">
            <li>
              <div></div>
              <span></span>
            </li>
            <li>
              <div></div>
              <span></span>
            </li>
            <li>
              <div></div>
              <span></span>
            </li>
            <li>
              <div></div>
              <span></span>
            </li>
            <li>
              <div></div>
              <span></span>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {


    }
  }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
footer {
  border-top: 1px solid #ccc;
  background: #f2f2f2;
  z-index: -1;
}
.footer_in {
  .left {
    width: 535px;
    ul {
      color: #999999;
      li {
        padding-right: 10px;
        border-right: 2px solid #ccc;
        &:last-of-type {
          border-right: none;
        }
      }
    }
    p {
      color: #666666;
      margin-top: 10px;
      span {
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .right {
    margin-top: 20px;
    ul {
      li {
        margin-left: 10px;
        span {
          display: block;
          margin: 5px 5px 0;
          width: 60px;
          height: 14px;
          background: url(../assets/tt.png) no-repeat;
          background-size: 180px 139px;
        }
        &:nth-of-type(1) span {
          background-position: 0 -108px;
          margin-left: -6px;
          width: 72px;
        }
        &:nth-of-type(2) span {
          background-position: -1px -91px;
        }
        &:nth-of-type(4) span {
          background-position: 0 -54px;
        }
        &:nth-of-type(5) span {
          background-position: -1px -72px;
        }
        div {
          width: 50px;
          height: 45px;
          background: url(../assets/new.png) no-repeat;
          background-size: 110px 552px;
        }

        &:nth-of-type(1) div {
          background-position: -63px -456.5px;
        }
        &:nth-of-type(2) div {
          background-position: -63px -101px;
        }
        &:nth-of-type(4) div {
          background-position: -60px -50px;
        }
        &:nth-of-type(5) div {
          background-position: 0 -101px;
        }
      }
    }
  }
}
</style>